<template>
	<base-page @scrollCall="scrollIndex">

		<cu-custom slot="header" v-if="headerShow" :isBack="true" :backCallType="true" @cuBack="detailBackBtn"
			bgColor="bg-white">
			<block slot="content">商品详情</block>
		</cu-custom>

		<view class="xyp-detail-page-box" slot="center">

			<view :style="{ top: StatusBar + 'px' }" style="position: fixed;z-index: 999;width: 100%;top: 0;"
				v-if="!headerShow">
				<view class="index-header" :style="{ paddingTop: '5px',paddingLeft: '15px',paddingRight: '15px'}">
					<button class="cu-btn cuIcon index-header-icon" @click="detailBackBtn">
						<image :src="staticImgUrl + 'shop/detail-back.png'" mode="" style="width: 100%;height: 100%;">
						</image>
					</button>
					<block v-if="info">
						<!-- #ifdef MP-WEIXIN -->
						<button class="cu-btn cuIcon index-header-icon" style="margin-left: 20rpx;" @click="shareBtn">
							<image :src="staticImgUrl + 'shop/detail-share.png'" mode=""
								style="width: 100%;height: 100%;" v-if="info"></image>
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="df-ai-cen">
							<button class="cu-btn cuIcon index-header-icon" @click="shareBtn">
								<image :src="staticImgUrl + 'shop/detail-share.png'" mode=""
									style="width: 100%;height: 100%;"></image>
							</button>
						</view>
						<!-- #endif -->
					</block>
				</view>
			</view>

			<view class="swiper-dk-box">
				<swiper class="screen-swiper" style="height: 755rpx;" :class="dotStyle?'square-dot':'round-dot'"
					:indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in images" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
							objectFit="cover" v-if="item.type=='video'"></video>
					</swiper-item>
				</swiper>
				<!-- 				<image src="../static/backicon.png" mode="scaleToFill" class="backicon" @click="back()"></image>
				<image src="../static/shareicon.png" mode="scaleToFill" class="shareicon"></image> -->
			</view>
			<view class="main-content">
				<view class="title">{{info.sku_name}}</view>
				<view class="price">￥{{info.price}}</view>
				<view class="xcImg" @click="toadvurl">
					<image :src="advImg" mode="widthFix"></image>
				</view>
				<image :src="staticImgUrl+'chat/sc2.png'" mode="scaleToFill" class="scabtn" v-if="info.collect_num"
					@click="collectDelete()"></image>
				<image :src="staticImgUrl+'chat/sc1.png'" mode="scaleToFill" class="scabtn" v-else @click="collect()">
				</image>
				<view class="" v-html="info.goods_content"></view>
			</view>

			<view class="footer-bar-box" v-if="info.goods_state == 1">
				<view class="iconitem" @click="toIndex()">
					<image :src="staticImgUrl + 'chat/homeicon.png'" mode="scaleToFill" class="icon"></image>
					<view class="tit">首页</view>
				</view>
				<view class="iconitem" @click="toStoreim(info.sku_id)">
					<image :src="staticImgUrl +'chat/kficon.png'" mode="scaleToFill" class="icon"></image>
					<view class="tit">客服</view>
				</view>
				<view class="iconitem" @click="toCart()">
					<view class="cuIconCart" v-if="catrCount>0">
						<view class="cuIconCart-nums">{{ catrCount }}</view>
					</view>
					<image :src="staticImgUrl+'chat/caricon.png'" mode="scaleToFill" class="icon"></image>
					<view class="tit">购物车</view>
				</view>
				<view class="btn-buy" @click="comfigBtn(info.sku_id,1,1)">立即购买</view>
				<view class="btn-car" @click="jumpsCart(info)">加入购物车</view>
			</view>

			<block v-if="info.goods_state == 0">
				<view class="footer-bar-box tts">商品已下架</view>
			</block>
			<!-- #ifdef H5 -->
			<block v-if="!isNativeApp() && shareContent != null">
				<wx-config :shareContent="shareContent"></wx-config>
			</block>
			<!-- #endif -->
			<block v-if="showFenXiang==true">
				<fenxiang @closeFx="closeFx" :sku_id="info.sku_id"></fenxiang>
			</block>
		</view>
	</base-page>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import fenxiang from '@/components/global/fenxiang.vue'
	import $Axios from '@/common/js/request/http.js';
	// #ifdef H5
	import wxConfig from '@/components/global/wx-config.vue';
	// #endif
	export default {
		name: 'ImageTextDetails',
		data() {
			return {
				showFenXiang: false,
				collectType: false,
				StatusBar: this.StatusBar,
				id: 0,
				info: {},
				dotStyle: true,
				images: [],
				headerShow: false,
				catrCount: 0,
				timeo: false,
				advImg: '',
				shareContent: {
					title: '', // 分享标题
					shareObjectDesc: '', // 分享描述
					thumbUrl: ''
				}
			};
		},
		onShow(e) {
			this.advImg = uni.getStorageSync('advImg');
			$Axios.post(`api/cart/count`).then(sucess => {
				console.log("sucess.data", sucess)
				this.catrCount = sucess;
			});
			console.log(this.catrCount)
		},
		onHide() {
			this.showFenXiang = false
		},
		onLoad() {
			this.id = this.$Router.queryObj().id || this.$Router.queryObj().scene
		},
		components: {
			fenxiang,
			// #ifdef H5
			wxConfig
			// #endif
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			closeFx(e) {
				this.showFenXiang = e
			},
			toadvurl() {
				if (!uni.getStorageSync('advImgurl')) return

				// #ifdef MP-WEIXIN
				uni.setStorageSync('weburl', uni.getStorageSync('advImgurl'));
				this.$Router.push({
					path: '/publicPages/activity/outerchain',
					query: {
						name: '详情'
					}
				});
				// #endif

				// #ifdef H5
				location.href = uni.getStorageSync('advImgurl')
				// #endif
			},
			back() {
				// 判断页面栈是否只有一个
				if (this.pagesLen == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			init() {
				this.getGoodsskuDetail();
				// this.getFabuUserInfo();
				// this.checkFabulousContent();
			},
			getGoodsskuDetail() {
				$Axios.post(`api/goodssku/detail`, {
					sku_id: +this.id,
					web_city: 0,
				}).then(res => {
					// console.log(res.goods_sku_detail)
					this.info = res.goods_sku_detail;
					this.setGoodsBrowse(res.goods_sku_detail.goods_id,res.goods_sku_detail.sku_id,res.goods_sku_detail.category_id,res.goods_sku_detail.category_id_1,res.goods_sku_detail.category_id_2,res.goods_sku_detail.category_id_3,res.goods_sku_detail.site_id)
					let imagesArr = res.goods_sku_detail.sku_images.split(',');
					let images = [];
					imagesArr.forEach((item, index) => {
						images.push({
							type: 'image',
							id: index,
							url: item
						});
					});
					this.shareContent = {
						title: res.goods_sku_detail.sku_name, // 分享标题
						shareObjectDesc: '醒目购，够醒目，醒目就购啦！', // 分享描述
						thumbUrl: res.goods_sku_detail.sku_image // 分享图标
					}
					this.images = images;
					this.info.goods_content = this.info.goods_content.replace(/<img/g, "<img style='width:100%'");
					// console.log('images', images);
				});
			},
			getFabuUserInfo() {
				$Axios.post(`api/content/getUserInfo`, {
					content_id: this.id,
				}).then(res => {
					this.userinfo = res;
				});
			},
			checkFabulousContent() {
				$Axios.post(`api/content/checkFabulousContent`).then(res => {
					this.isZan = +res;
				})
			},
			checkMemberFollow() {
				if (this.userinfo.headimg && this.userinfo.nickname) {
					$Axios.post.checkMemberFollow({
						followers_id: this.info.member_id,
					}).then(res => {
						this.isAttention = +res;
					})
				}
			},
			collect() {
				$Axios.post(`api/goodscollect/add`, {
					sku_id: this.id,
					web_city: 0,
					site_id: this.info.site_id,
					goods_id: this.info.goods_id,
					category_id: this.info.category_id,
					sku_name: this.info.name,
					sku_price: this.info.price,
					sku_image: this.info.sku_image,
				}).then(res => {
					this.getGoodsskuDetail();
					// this.info = Object.assign(this.info, res);
				});
			},
			collectDelete() {
				$Axios.post(`api/goodscollect/delete`, {
					sku_id: this.id,
					web_city: 0,
					goods_id: this.info.goods_id,
				}).then(res => {
					this.getGoodsskuDetail();
					// this.info = Object.assign(this.info, res);
				});
			},
			toIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			toStoreim(sku_id) {
				this.$Router.push({
					path: '/chatPages/storeim/storeim',
					query: {
						sku_id: sku_id
					}
				})
			},
			toCart() {
				this.$Router.push({
					path: '/shopPages/goods/cart',
				})

			},
			// 加入购物车
			jumpsCart(obj) {
				console.log(obj)
				if (this.timeo == true) {
					this.$Utils.tip('不要点击过快哦')
					return false
				}
				if (!this.$Utils.isLoginCall()) return false;
				$Axios.post(`api/cart/add`, {
					...obj,
					site_id: this.info.site_id,
					num: 1
				}).then(res => {
					this.timeo = true
					$Axios.post(`api/cart/count`).then(sucess => {
						this.catrCount = sucess;
						setTimeout(() => {
							this.$Utils.tip('加入成功')
							this.timeo = false
						}, 1900)
					});
				});
			},
			// 确定购买
			comfigBtn(sku_id, type, num) {
				if (!this.$Utils.isLoginCall() && inx != 0) return false;
				this.$Router.push({
					path: '/payPages/goods/pay',
					query: {
						sku_id: sku_id,
						num: num,
						type: type
					}
				});
			},
			// 返回页面
			detailBackBtn() {
				this.$Utils.compatiBleJump({
					key: 'exit'
				}, 1);
			},
			scrollIndex(e) {
				if (e.detail.scrollTop > 260) {
					this.headerShow = true;
				} else {
					this.headerShow = false;
				}
			},
			shareBtn(e) {
				// #ifdef H5
				if (this.isNativeApp()) {
					var urlnews = location.href.indexOf("?") == -1 ? "?" : "&"
					this.$Sdk.share(this.shareObj.sku_name, location.href + urlnews + 'source_member=' + this
						.userInfo.member_id, this.shareObj.sku_image)
				} else {
					this.showFenXiang = !this.showFenXiang
					console.log('H5分享', this.showFenXiang);
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.showFenXiang = !this.showFenXiang
				console.log('小程序分享', this.showFenXiang);
				// #endif
			},

		},
		mounted() {
			this.init();
			// #ifdef MP-WEIXIN
			this.backSolt = true
			// #endif
			this.pagesLen = getCurrentPages().length;
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			var title = this.info.sku_name;
			var path = '/publicPages/activity/xinyoupin-detail?id='+ this.info.sku_id +'&source_member='+ this.userInfo.member_id
			var imageUrl = this.info.sku_image;
			return {
				title: title,
				path: path,
				imageUrl: imageUrl
			};
		},
		onShareTimeline(res) {
			var title = this.info.sku_name;
			var path = '/publicPages/activity/xinyoupin-detail?id='+ this.info.sku_id +'&source_member='+ this.userInfo.member_id
			var imageUrl = this.info.sku_image;
			return {
				title: title,
				path: path,
				imageUrl: imageUrl
			};
		},
	};
</script>

<style lang="scss">
	.xyp-detail-page-box {
		width: 750rpx;

		.swiper-dk-box {
			width: 750rpx;
			height: 755rpx;
			position: relative;

			.backicon {
				position: absolute;
				left: 30rpx;
				top: 30rpx;
				width: 42rpx;
				height: 42rpx;
			}

			.shareicon {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}

		.main-content {
			width: 750rpx;
			box-sizing: border-box;
			padding: 30rpx 60rpx 100rpx;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			margin-top: -40rpx;
			background: #fff;
			z-index: 999;
			position: relative;

			.title {
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;
				line-height: 40rpx;
				margin: 20rpx 0;
			}

			.price {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF364E;
				line-height: 59rpx;
				margin-bottom: 30rpx;
			}

			.scabtn {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				position: absolute;
				top: -30rpx;
				right: 60rpx;
			}
		}

		.footer-bar-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 90rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			z-index: 99999;

			.iconitem {
				float: left;
				width: 60rpx;
				text-align: center;
				margin-right: 26rpx;
				position: relative;

				.icon {
					width: 38rpx;
					height: 38rpx;
				}

				.tit {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
					line-height: 26rpx;
					white-space: nowrap;
				}
			}

			.btn-car {
				height: 70rpx;
				line-height: 70rpx;
				background: #FF9A23;
				border-radius: 38px;
				color: #fff;
				float: right;
				font-size: 24rpx;
				padding: 0 45rpx;
			}

			.btn-buy {
				height: 70rpx;
				line-height: 70rpx;
				background: linear-gradient(90deg, #FF7124 5%, #FF364E 98%);
				border-radius: 38px;
				color: #fff;
				float: right;
				font-size: 24rpx;
				padding: 0 45rpx;
				margin-left: 20rpx;
			}
		}
	}

	.tts {
		font-size: 30rpx;
		text-align: center;
	}

	.cuIconCart {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		right: -27rpx;
		background-color: red;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		.cuIconCart-nums {
			font-size: 20rpx;
			color: #ffffff;
			text-align: center;
			line-height: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	/* #ifdef  H5 */
	.index-header {
		display: flex;
		justify-content: space-between;
	}

	/* #endif */
	/* #ifdef  MP-WEIXIN */
	.index-header {
		display: flex;
	}

	/* #endif */
	.xcImg {
		width: 100%;
		// height: 283rpx;
		margin-bottom: 10rpx;
	}

	.xcImg image {
		width: 100%;
		height: 100%;
	}
</style>
